<template>
  <div class="Details">
    <div class="details_top">
        <van-icon name="arrow-left" class="goback" />
        <div style="font-size:18px;  text-align: center;">体检预约详情</div>
    </div>
    <div class="details_name">
        <span class="message" style="padding-right:10px;">小一</span>
        <span class="message"> 女</span>
        <span class="message" style="padding-left:230px; color:rgb(0, 209, 209); ">待体检</span>
    </div>
    <div class="parentBox">
        <div class="child">体检机构：【慈铭】广州体育中心体检中心</div>
        <div class="child">体检时间：2016-04-12</div>
        <div class="child">预约单号：1009</div>
    </div>
    <div class="details_text" style="display: flex; justify-content: space-between; align-items: center;">
        <div class="details_id">订单：1202</div>
    </div>
    <div class="details_content">
        <van-image class="massage_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
        <div class="massage_text">
            <span>老年人体检套餐豪华版（女）</span>
            <br>
            <van-icon name="arrow" class="massage_goback" />
            <br>
            <span class="price">￥998</span>
        </div>
    </div>
    <div class="submit_add">
        <van-button plain type="primary" class="add_item">我要加项</van-button>
    </div>
    <div class="foot_submit">
        <van-button type="default" class="off_forward">取消预约</van-button>
        <van-button type="default" class="alter_time">修改时间</van-button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Details',
}
</script>
<style>
        *{
            padding: 0;
            margin: 0;
        }
        .details_top{
            height: 50px;
        }
        .goback{
            float: left;
            font-size: 22px;
            padding-left: 0;
        }
        .details_name{
            height: 30px;
            border-bottom: 1px solid rgb(168, 168, 168);
            margin: 6px;
        }
        .parentBox{
            font-size: 14px;
            border-bottom:8px solid rgb(238, 238, 238);
      

        } 
        .child{
            width: 100%;
            height: 25px;
            margin: 6px;

        }
        .details_text{
            height: 50px;
            border-bottom: 1px solid rgb(201, 201, 201);
            padding-left: 20px;
        
        }
        .details_content{
            height: 120px;
            border-bottom:8px solid rgb(238, 238, 238);
            display: flex;
        }
        .massage_img{
            width: 120px;
            height: 100px;
            padding: 10px; 
        }
        .massage_text{
            padding-top: 10px;
            font-size: 14px;
        }
        
        .massage_goback{
            color: rgb(192, 192, 192);
            font-size: 18px;
            padding: 20px 18px 20px 180px;
        }
        /* 加项按钮 */
        .submit_add{
            padding: 15px 90px;
            padding-bottom: 100px;
        }
        .add_item{
            border-color: #3ecccc;
            width: 180px;
            height: 35px;
            border-radius: 5px;  
        }
        /* 底部按钮 */
        .foot_submit{
            height: 60px;
            /* border-top: 1px solid #3ecccc;  */
            background-color:#3ecccc;
            display: flex;
        }
        /* 取消预约按钮 */
        .off_forward{
            font-size: 16px;
            color: #3ecccc;
            width: 100%;
            height: 100%;
        }
        /* 修改时间按钮 */
        .alter_time{
            color:#fff;
            font-size: 16px;
            background-color:#3ecccc;
            width: 100%;
            height: 100%;
        }
    </style>
